import loadable from '@loadable/component'
import * as React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

// 页面异步chunk优化
const useState = loadable(
  () => import(/* webpackChunkName: "Home" */ '../pages/useState')
)
const WatchCount = loadable(
  () => import(/* webpackChunkName: "Home" */ '../pages/useState/WatchCount')
)
const VirtualizedList = loadable(
  () => import(/* webpackChunkName: "Home" */ '../pages/VirtualizedList')
)
const DemoContent = loadable(
  () => import(/* webpackChunkName: "Home" */ '../pages/App')
)
const HooksDemo = loadable(
  () => import(/* webpackChunkName: "Home" */ '../pages/App/HooksDemo')
)

const AComponent = loadable(
  () =>
    import(/* webpackChunkName: "MemoComponents" */ '../pages/Select-Cascader')
)

const SortableContainer = loadable(
  () =>
    import(
      /* webpackChunkName: "SortableContainer" */ '../pages/SortableContainer'
    )
)

export const Router: React.FC = () => {
  return (
    <BrowserRouter basename={'/hybrid-server'}>
      <Route
        render={({ location }) => (
          <Switch location={location}>
            <Route exact path="/useState" component={useState} />
            <Route exact path="/WatchCount" component={WatchCount} />
            <Route exact path="/virtualizedList" component={VirtualizedList} />
            <Route exact path="/demoContent" component={DemoContent} />
            <Route exact path="/hooksDemo" component={HooksDemo} />
            <Route exact path="/hooksDemo" component={HooksDemo} />
            <Route exact path="/memoComponents" component={AComponent} />
            <Route
              exact
              path="/SortableContainer"
              component={SortableContainer}
            />

            {/* <Route component = {NotFound}/> */}
          </Switch>
        )}
      />
    </BrowserRouter>
  )
}
